<template>
	<view class="friend_info">
		<view class="friend_top" @tap="close_operate">
			<view class="friend_left">
				<image class="friavtar" :src="friendInfo.avatar"></image>
			</view>
			<view class="friend_right">
				<view class="friname">{{friendInfo.nickname}}</view>
				<view class="friconent">{{friendInfo.content}}</view>
				<view class="thumbnails">
					<view :class="imglist.length == 1?'my-gallery':'thumbnail'" v-for="(image, index_images) in imglist" :key="index_images">
						<image class="gallery_img" lazy-load mode="aspectFill" :src="photo_cdn+image" :data-src="photo_cdn+image" @tap="previewImage(imglist,index_images)"></image>
					</view>
				</view>
				<view class="upvote">
					<view class="fritime">{{friendInfo.create_time | formatMsgTime}}</view>
					<view class="upvote_view flexc" @tap.stop="taggle_operate" :class="{actives:clicking==2}">
						<view class="upvote_btn_par flexc">
							<view class="upvote_btn" hover-class="hover_item">
								<view class="upvote_dot"></view>
								<view class="upvote_dot"></view>
							</view>
						</view>
						
						<!-- 展开按钮 -->
						<view class="toolbar">
							<view class="flex ali-c toolbar_item">
								<view class="like flex ali-c"><!-- @tap.stop="tolike(post)" -->
									<image class="like_img" :src="friendInfo.islike===0?photo_cdn+'zpupload/20231028/bcfad1499723fb8a1f.png':photo_cdn+'zpupload/20231028/1602eff92ec3ecd755.png'"></image>
								</view>
								<view class="quanum">{{friendInfo.like_num}}</view>
							</view>									
							<view class="flex ali-c toolbar_item">
								<view class="comment flex ali-c"><!-- @tap.stop="tocomment(post)" -->
									<image class="comment_img" :src="photo_cdn+'zpupload/20231028/225ff541666c6e9cda.png'"></image>
								</view>
								<view class="quanum" @tap.stop="publish">评论</view>
							</view>
						</view>								
					</view>
				</view>
				
			</view>
		</view>
		<!-- 评论区 -->
		<view class="friend_bottom">
			<fdcomment ref="fdComment" @add="add" @del="del" @like="like" @focusOn="focusOn" @revert='revert' @unfold="unfold" @cut_out="cut_out" :deleteTip="'确认删除？'"
			    :cmData="commentData" :friend="1" :user_id="user_id" @commentInput="commentInput"></fdcomment>
		</view>
		<login :hidden="isshowlogin" @close="closefun" @loginsucc="loginsucc"></login>
	</view>
</template>

<script>
	import{getCommentList,submitComment,replyComment,del,like} from "@/utils/api/user.js";
	import config from "@/utils/config.js";
	let {photo_cdn} = config.baseUrl;
	import {lk_reverse} from "@/utils/libs/luokuangmap.js";
	export default{
		data(){
			return{
				friendInfo:{},
				photo_cdn,
				id:'',
				page:0,
				isshowlogin: false,
				imglist:[],
				
				province_id:'',
				user_id: 0,
				userinfo:{},
				commentData: {
					comment:[],
					commentSize:0,
					readNumer:0										
				},
				reqFlag: false ,// 请求标志，防止重复操作，true表示请求中
				clicking: 1//判断有没有点击展开按钮  1没有点击 2点击了
			}
		},
		onLoad(option){
			this.id = option.id?option.id:'';
			this.getCommentListfun();
		},
		onShow(){
			let token = uni.getStorageSync("token");
			if (!token) {
				// #ifdef MP-WEIXIN
				setTimeout(() => {
					this.isshowlogin = true;
				}, 1500)
				// #endif
			}else {
				
			}
			//取缓存的省份id
			let province_id = uni.getStorageSync("province_id");
			if(province_id){
				this.province_id = province_id;
			}
		},
		methods:{
			// 登录校验
			async checkLogin() {
				let token = uni.getStorageSync("token");
				if(token){
					return true;
				}
				if (!token) {
					this.isshowlogin = true;
					return false;
				}
			},
			//关闭授权登录弹窗
			closefun() {
				this.isshowlogin = false;
			},
			//登录完成
			loginsucc() {
			
			},
			//发表评论
			publish(){
				this.$refs.fdComment.commentInput();
				this.clicking = 1;
			},
			//展开关闭点赞评论按钮
			taggle_operate(){
				if(this.clicking==1){
					 this.clicking = 2
				}else if(this.clicking==2){
					this.clicking = 1
				}
			},
			//点空白处关闭按钮
			close_operate(){
				if(this.clicking==2){
					this.clicking = 1
				}
			},
			//评论输入框弹起 获取定位
			commentInput(){
				let token = uni.getStorageSync("token");
				if(token && !this.province_id){
					this.getlatandlng_one();
				}
			},
			// 输入框聚焦
			focusOn() {
				this.checkLogin();
			},
			//预览图片
			previewImage(imageList, image_index) {
				// var current = imageList[image_index];
				let urls = imageList.map((item)=>{
					return this.photo_cdn + item;
				})
				uni.previewImage({
					current: image_index,
					urls: urls,
				});
			},
			async getCommentListfun(){
				this.page++
				let res = await getCommentList({
					circle_id:this.id,
					page:this.page
				})
				if(res.code==1){
					this.friendInfo = res.data.info;
					this.user_id = res.data.info.user_id;
					console.log(this.user_id)
					if(res.data.info.pics){
						this.imglist = res.data.info.pics.split(",");
					}
					
					let beforedata =  this.commentData.comment.filter(item => item.is_mock!=1 );//旧的
					let newcomlist = res.data.list?res.data.list:[];//新的
					newcomlist = newcomlist.map((item,index)=>{
						item.is_spread = 2;//折叠状态 默认收起
						return item;
					})
					this.commentData = {
						readNumer: res.data.total_count,
						commentSize: this.commentData.commentSize+newcomlist.length,//?
						comment: [...beforedata,...newcomlist]
					};
					if(res.data==null){
						this.isshowall = true;
						if(this.page>1){
							// this.$api.msg('没有更多了~');
						}
					}else if(newcomlist.length==0){
						this.isshowall = true;
						if(this.page>1){
							// this.$api.msg('没有更多了~');
						}
					}
				}else{
					
				}
			},
			//新增评论
			async add(req){
				let boos = await this.checkLogin()
				if (!boos) {
					return
				}
				if (this.reqFlag) {
					uni.showToast({
						title: '操作频繁',
						duration: 1000
					});
					return
				}
				this.reqFlag = true;
				try{
					let res = await submitComment({
						circle_id:this.id,
						content:req.content,
						province_id:this.province_id
					})
					if(res.code==1){
						this.$api.msg(res.msg)
						this.reqFlag = false;
						this.$refs.fdComment.addComplete();
						
						//模拟数据添加
						let mockdata = {
							is_mock:1,
							"id":res.data.info.id,
							"article_id":this.article_id,
							"user_id":this.user_id,
							"createtime":res.data.info.createtime,
							"likes":0,
							"content":res.data.info.content,
							"reply_id":0,
							"replytime":null,
							"reply_user_id":0,
							"ip":"",
							"status":0,
							"province":"",
							"nickname":this.userinfo.nickname,
							"avatar":this.userinfo.avatar,
							"sub":[
			
							]
						}
						
						this.commentData = {
							readNumer: this.commentData.readNumer+1,
							commentSize: this.commentData.commentSize+1,
							comment: [...this.commentData.comment,mockdata]
						};
					}else{
						this.$api.msg('没有获取到定位！')
					}
					this.reqFlag = false;
				}catch(err){
					console.log(err)
					this.reqFlag = false;
					
				}
			},
			//回复评论
			async revert(pId,content){
				let res = await replyComment({
					circle_id:this.id,
					reply_id:pId,
					content:content,
					province_id:this.province_id
				})
				if(res.code==1){
					this.$api.msg(res.msg)
					this.$refs.fdComment.closeInput();
					
					let mockdata = {
						is_mock:1,
						"id":res.data.info.id,
						"article_id":this.article_id,
						"user_id":0,
						"createtime":res.data.info.createtime,
						"likes":0,
						"content":res.data.info.content,
						"reply_id":pId,
						"replytime":res.data.info.createtime,
						"reply_user_id":this.user_id,
						"ip":"",
						"status":0,
						"province":"",
						"nickname":this.userinfo.nickname,
						"avatar":this.userinfo.avatar,
					}
					let commentData  = this.commentData.comment;
					for(var i=0;i<commentData.length;i++){
						if(commentData[i].id==pId){
							commentData[i].sub.push(mockdata);//插入回复评论的数据
						}
					}
					this.commentData = {
						readNumer: this.commentData.readNumer+1,
						commentSize: this.commentData.commentSize+1,
						comment: [...commentData]
					};
				}
			},
			// 展开评论
			async unfold(data){
				let beforedata =  this.commentData.comment;//旧的
				beforedata[data.index].is_spread = 1;
				this.commentData.comment = beforedata;
			},
			//收起
			async cut_out(data){
				let beforedata =  this.commentData.comment;//旧的
				beforedata[data.index].is_spread = 2;
				this.commentData.comment = beforedata;
			},
			// 删除评论
			async del(commentId) {
				let bool = await this.checkLogin()
				if (!bool) {
					return
				}
				if (this.reqFlag) {
					uni.showToast({
						title: '操作频繁',
						duration: 1000
					});
					return
				}
				this.reqFlag = true;
				let res = await del({
					comment_id:commentId
				})
				if(res.code==1){
					this.$api.msg(res.msg)
					this.reqFlag = false;
					this.$refs.fdComment.deleteComplete(commentId);
				}
			},
			// 点赞评论
			async like(commentId) {
				let bool = await this.checkLogin()
				if (!bool) {
					return
				}
				if (this.reqFlag) {
					uni.showToast({
						title: '操作频繁',
						duration: 1000
					});
					return
				}
				this.reqFlag = true;
				let res = await  like({
					comment_id:commentId
				})
				if(res.code==1){
					this.reqFlag = false;
					this.$refs.fdComment.likeComplete(commentId);
				}				
			},
			//获取定位
			getlatandlng_one(){
				let istongyilat = uni.getStorageSync("istongyilat");
				if(istongyilat==1){
					this.getlatandlng();
				}else if(istongyilat==2){
					console.info("被拒绝了 不再询问！！");
				}
				else{
					// delCancel: true,
					if(uni.getSystemInfoSync().platform=='ios'){
						this.$showModal({
						    title:'温馨提示',
						    concent:'系统将获取您的位置信息,用于展示你的评论位置',
						    confirmVal:'继续',
							delCancel:true,
						    // cancelVal:'拒绝',
						}).then(res=>{
							uni.setStorageSync("istongyilat",1)
						    this.getlatandlng();
						}).catch(()=>{
						   //拒绝了~~
						   //拒绝了
						   uni.setStorageSync("istongyilat",2);
						})
					}else{
						this.$showModal({
						    title:'温馨提示',
						    concent:'系统将获取您的位置信息,用于展示你的评论位置 是否继续？',
						    confirmVal:'继续',
						    cancelVal:'拒绝',
						}).then(res=>{
							uni.setStorageSync("istongyilat",1)
						    this.getlatandlng();
						}).catch(()=>{
						   //拒绝了~~
						   //拒绝了
						   uni.setStorageSync("istongyilat",2);
						})
					}
				}
			},
			getlatandlng(){
				// #ifndef MP-WEIXIN
				uni.getLocation({
					// type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: res => {
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						this.lk_reverse_fun({lon:res.longitude,lat:res.latitude});
					},
					fail: err => {
						console.info("err",err);
					}
				})
				// #endif
			
				// #ifdef MP-WEIXIN
				uni.getFuzzyLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: res => {
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						this.lk_reverse_fun({lon:res.longitude,lat:res.latitude});
					},
					fail: err => {
						console.info("err",err);
					}
				})
				// #endif
				
			},
			//逆解析
			lk_reverse_fun(res){
				lk_reverse({
					lon:res.lon,
					lat:res.lat,
				}).then((success)=>{
					console.info('success',success);
					let result = success.result[0];
					console.info("province_id",result.properties.province_id,typeof(result.properties.province_id));
					this.province_id = result.properties.province_id;
					uni.getStorageSync("province_id",this.province_id);
					
					uni.getStorageSync("county_id",result.properties.county_id);
					// this.district = result.properties.county;
					// let county_id = parseInt(result.properties.county_id);
					// this.city_id = county_id-(county_id%100);
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "./friend_info.scss"
</style>